<template>
  <view class="customer-service">
    <!-- 聊天内容区域 -->
    <scroll-view
      class="chat-container"
      scroll-y
      :scroll-top="scrollTop"
      @scrolltoupper="loadMoreMessages"
    >
      <view class="message-list">
        <view
          v-for="(message, index) in messages"
          :key="index"
          class="message-item"
          :class="message.type === 'bot' ? 'message-left' : 'message-right'"
        >
          <view class="avatar" v-if="message.type === 'bot'">
            <i class="iconfont icon-zaixiankefu"></i>
          </view>
          <view class="message-content">
            <view class="message-bubble">{{ message.content }}</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部输入框 -->
    <view class="input-area">
      <input
        type="text"
        class="message-input"
        v-model="inputMessage"
        placeholder="请输入消息..."
        @confirm="sendMessage"
      />
      <view class="send-btn" @tap="sendMessage">发送</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomerService",
  data() {
    return {
      messages: [
        {
          type: "bot",
          content: "你好，我是机器人小乐，请问有什么可以帮您？",
        },
      ],
      inputMessage: "",
      scrollTop: 0,
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return;

      // 添加用户消息
      this.messages.push({
        type: "user",
        content: this.inputMessage,
      });

      // 清空输入框
      this.inputMessage = "";

      // 模拟机器人回复
      setTimeout(() => {
        this.messages.push({
          type: "bot",
          content: "正在为您转接人工客服...",
        });
      }, 500);

      this.scrollToBottom();
    },
    scrollToBottom() {
      setTimeout(() => {
        this.scrollTop = 9999999;
      }, 100);
    },
    loadMoreMessages() {
      // 实现加载更多历史消息的逻辑
      console.log("加载更多消息");
    },
  },
};
</script>

<style lang="scss">
.customer-service {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;

  .nav-bar {
    display: flex;
    align-items: center;
    height: 88rpx;
    background-color: #fff;
    padding: 0 30rpx;
    position: relative;

    .back-icon {
      font-size: 36rpx;
      color: #333;
    }

    .title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333;
    }

    .right-icon {
      font-size: 36rpx;
      color: #333;
    }
  }

  .chat-container {
    flex: 1;
    padding: 20rpx;

    .message-item {
      display: flex;
      margin-bottom: 20rpx;

      &.message-left {
        justify-content: flex-start;
        align-items: center;

        .message-bubble {
          background-color: #fff;
          color: #333;
        }
      }

      &.message-right {
        justify-content: flex-end;

        .message-bubble {
          background-color: #07c160;
          color: #fff;
        }
      }

      .avatar {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .iconfont {
          width: 100%;
          height: 100%;
          font-size: 60rpx;
          border-radius: 8rpx;
        }
      }

      .message-bubble {
        max-width: 70%;
        padding: 20rpx;
        border-radius: 8rpx;
        word-break: break-all;
      }
    }
  }

  .input-area {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;

    .message-input {
      flex: 1;
      height: 72rpx;
      background-color: #f5f5f5;
      border-radius: 36rpx;
      padding: 0 30rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
    }

    .send-btn {
      width: 120rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background-color: #07c160;
      color: #fff;
      border-radius: 36rpx;
      font-size: 28rpx;
    }
  }
}
</style>
